﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="style/css/style.css" />

    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <link rel="stylesheet" href="../Styles/TicketList.css" />
    <script src="script/common/main.js"></script>
    <script src="script/common/common.js"></script>
    <script src="script/common/jquery.pageItem.js"></script>
    <script src="script/common/jsRender.min.js"></script>
    <script src="../javaScripts/Moment.js"></script>
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <meta content="email=no" name="format-detection" />
    <link href="../styles/swiper.min.css" rel="stylesheet" />
    <link href="style/css/orderlist.css" rel="stylesheet" />
    <script src="../javaScripts/swiper.min.js"></script>
    <title>我的订单</title>
    <style>
        .ticket-list li {
            border-bottom: 1px solid #000000;
        }

        .i-status {
    float: right;
    width: 109px;
    position: absolute;
    height: 83px;
    top: 1px;
    right: -8px;
}
        .status-refundAll {
    background-image: url(../images/refundAll.png);
    background-size: 90%;
    background-repeat: no-repeat;
}
.status-refundPart{
 background-image: url(../images/refundPart.png);
    background-size: 90%;
    background-repeat: no-repeat;    
}
    </style>
</head>
<body>
    <div class="personal_center">
        <ul id="myTab0">
            <li class="active" id="payed"><a href="MyOrderList.html?payStatus=payed">已付款</a></li>
            <li class="normal" id="refund"><a href="MyOrderList.html?payStatus=refund">退票</a></li>
        </ul>
        <div class="personal_info">
            <div class="order_list" id="ResultList">
            </div>
        </div>
    </div>

    <script src="../javaScripts/zepto.min.js"></script>
    <script src="../js/oAuth2.js"></script>
    <script src="../javaScripts/knockout-3.2.0.debug.js"></script>

    <script id="ResultTemplateOrder" type="text/x-jsrender">
        <ul>
            <li>
                <a href="OrderDetail.html?orderId={{:OrderID}}&code={{:access_code}}">
                    <div class="info_01">
                        <h3>{{:TicketName}}</h3>
                        <p>实付<b>￥{{:TicketTotalPrice}}</b>共<b>{{:TicketCount}}</b>件商品</p>
                        <span class="wave_blue_icon"></span>
                    </div>
                    <div class="info_02">
                        <dl>
                            <dd><b class="i_gray_icon"></b>订单编号 {{:OrderNo}}</dd>
                            <dd><b class="time_gray_icon"></b>购票日期 {{:BuyTime}}</dd>
                            <dd><b class="time_gray_icon"></b>有效期至 {{:LastUseDate}}</dd>
                        </dl>
                    </div>
                    <div class="info_03">
                        <span>{{:OrderStatus}}</span>
                    </div>
                    <i class="{{:RefundStatus}} i-status"></i>
                </a>
            </li>
        </ul>
    </script>

    <script id="ResultTemplateTicket" type="text/x-jsrender">
        <ul>
            <li>
                <div class="info_01">
                    <h3>{{:TicketName}}</h3>
                    <p>实付<b>￥{{:TicketTotalPrice}}</b>共<b>{{:TicketCount}}</b>件商品</p>
                    <span class="wave_blue_icon"></span>
                </div>
                <div class="info_02">
                    <dl>
                        <dd><b class="i_gray_icon"></b>退单编号 {{:RefundCode}}</dd>
                        <dd><b class="i_gray_icon"></b>订单编号 {{:OrderNo}}</dd>
                        <dd><b class="time_gray_icon"></b>购票日期 {{:LastUseDate}}</dd>
                    </dl>
                </div>
                <div class="info_03">
                    <span>{{:TicketStatus}}</span>
                </div>
              
            </li>
        </ul>
    </script>

    <script>
        $(document).ready(function () {
            var status = GetQueryString('payStatus');
            if (status == "payed") {
                $("#payed").removeClass("normal");
                $("#payed").addClass("active");
                $("#refund").removeClass("active");
                $("#refund").addClass("normal");

                GetOrderList();
            } else if (status == "refund") {
                $("#refund").removeClass("normal");
                $("#refund").addClass("active");
                $("#payed").removeClass("active");
                $("#payed").addClass("normal");

                MyRefundTickets();
            } else {
                $("#payed").removeClass("normal");
                $("#payed").addClass("active");
                $("#refund").removeClass("active");
                $("#refund").addClass("normal");

                GetOrderList();
            }

            function GetOrderList() {
                $.ajax({
                    type: "post",
                    url: '../WebService/OrderWebService.asmx/MyOrders',
                    dataType: 'json',
                    data: { openId: GetQueryString('openId') },
                    success: function (result) {
                        if (result.IsSuccess) {
                            var data = [];
                            var access_code = getCode();
                             

                            
                            $(result.Data).each(function (index, obj) {

                                var item = { access_code: access_code, OrderNo: obj.OrderCode, OrderID: obj.OrderId, TicketImageUrl: '../TicketImages/1.jpg', TicketName: obj.TicketName, BuyTime: obj.BuyTime, LastUseDate: obj.DeadTime, TicketPrice: obj.singleTicketPrice, TicketCount: obj.TicketCount, TicketTotalPrice: obj.TotelFee, OperateUrl: '', OrderStatus: obj.OrderStatus };

                                //todo:测试数据，请替换未服务对应的数据
                                //是否退票
                                if (obj.hasRefundTicket) {
                                    switch (obj.RefundType) {
                                        case '部分退票':
                                            item.RefundStatus = "status-refundPart";
                                            break;
                                        case '全部退票':
                                            item.RefundStatus = "status-refundAll";
                                            break;
                                        
                                        default:
                                            item.RefundStatus = '';
                                    }
                                }

 

                                data.push(item);
                            });

                            var template = $.templates("#ResultTemplateOrder");
                            var htmlOutput = template.render(data);
                            $("#ResultList").html(htmlOutput);
                        } else {
                            alert(result.Message);
                        }
                    }
                });
            }

            function MyRefundTickets() {
                $.ajax({
                    type: "post",
                    url: '../WebService/OrderWebService.asmx/MyRefundTickets',
                    dataType: 'json',
                    data: { openId: GetQueryString('openId') },
                    success: function (result) {
                        if (result.IsSuccess) {
                            var data = [];
                            $(result.Data).each(function (index, obj) {
                                data.push({ OrderNo: obj.OrderCode, RefundCode: obj.RefundCode, TicketName: obj.TicketName, TicketPrice: obj.Price, TicketCount: 1, TicketTotalPrice: obj.Price, LastUseDate: obj.BuyTime, TicketStatus: obj.TicketStatus });
                            });

                            var template = $.templates("#ResultTemplateTicket");
                            var htmlOutput = template.render(data);
                            $("#ResultList").html(htmlOutput);
                        } else {
                            alert(result.Message);
                        }
                    }
                });
            }
        });

        function getRandomNum(Min, Max) {
            var Range = Max - Min;
            var Rand = Math.random();
            return (Min + Math.round(Rand * Range));
        }

        function getCode() {
            return access_code;
        }
    </script>
</body>
</html>
